<section style="height:2000px;">
  <section class="vbox" style="height: 2000px;">
    <section class="scrollable padder-lg">
      <h2 class="font-thin m-b">项目列表</h2>
      <div class="row row-sm">
        <div

          *ngFor="let project of page.list; index as i; first as isFirst"

          class="project-item-margin col-xs-6 col-sm-4 col-md-3" style="    width: 344px;">
          <div class="item">
            <a (click)="toProjectIndex(project.id)">
              <div class="panel panel-default project-item-height">
                <div class="panel-head-height"      *ngIf="i==0" style="background-image:url(../assets/images/svg/panel-head-one.svg)"></div>
                <div class="panel-head-height"      *ngIf="i==1" style="background-image:url(../assets/images/svg/panel-head-two.svg)"></div>
                <div class="panel-head-height"      *ngIf="i==2" style="background-image:url(../assets/images/svg/panel-head-thress.svg)"></div>
                <div class="panel-head-height"      *ngIf="i==3" style="background-image:url(../assets/images/svg/panel-head-four.svg)"></div>
                <div class="panel-head-height"      *ngIf="i==4" style="background-image:url(../assets/images/svg/panel-head-five.svg)"></div>
                <div class="panel-head-height"      *ngIf="i==5" style="background-image:url(../assets/images/svg/panel-head-six.svg)"></div>
                <div class="panel-head-height"      *ngIf="i==6" style="background-image:url(../assets/images/svg/panel-head-seven.svg)"></div>
                <div class="panel-head-height"      *ngIf="i==7" style="background-image:url(../assets/images/svg/panel-head-eight.svg)"></div>
                <div class="panel-head-height"      *ngIf="i==8" style="background-image:url(../assets/images/svg/panel-head-nine.svg)"></div>
                <div class="panel-head-height"      *ngIf="i==9" style="background-image:url(../assets/images/svg/panel-head-one.svg)"></div>
                <div class="panel-head-height"      *ngIf="i==10" style="background-image:url(../assets/images/svg/panel-head-two.svg)"></div>
                <div class="panel-head-height"      *ngIf="i==11" style="background-image:url(../assets/images/svg/panel-head-thress.svg)"></div>
                <div class="panel-head-height"      *ngIf="i==12" style="background-image:url(../assets/images/svg/panel-head-one.svg)"></div>
                <div class="panel-head-height"      *ngIf="i==13" style="background-image:url(../assets/images/svg/panel-head-two.svg)"></div>
                <div class="panel-head-height"      *ngIf="i==14" style="background-image:url(../assets/images/svg/panel-head-thress.svg)"></div>
                <div class="panel-head-height"      *ngIf="i==15" style="background-image:url(../assets/images/svg/panel-head-four.svg)"></div>
                <div class="panel-head-height"      *ngIf="i==16" style="background-image:url(../assets/images/svg/panel-head-five.svg)"></div>
                <div class="panel-head-height"      *ngIf="i==17" style="background-image:url(../assets/images/svg/panel-head-six.svg)"></div>

                <div class="panel-body">
                  <h3 class="project-item-title">
                    {{project.title}}
                  </h3>
                  <p class="project-item-content">
                    {{project.description}} </p>
                  <div class="panel-footer">
                    <div class="inline project-item-footer-width">
                      <i class="icon-like"></i>
                      {{project.countThumbsUp}}
                    </div>
                    <div class="inline project-item-footer-width">
                      <i class="icon-eye"></i>
                      {{project.countFollow}}
                    </div>

                  </div>
                </div>
              </div>
            </a>
          </div>

        </div>

      </div>
      <div>

        <!-- pager -->
        <ul *ngIf="page.list && page.list.length" style="margin-left:72px" class="pagination">
          <li [ngClass]="{disabled:page.firstPage}">
            <a [ngClass]="{disabled:page.firstPage}"  (click)="setPage(0)">首页</a>
          </li>
          <li [ngClass]="{disabled:page.firstPage}">
            <a (click)="setPage(page.pageNo  - 1)">上一页</a>
          </li>
          <!--<li *ngFor="let p of page.list" [ngClass]="{active:page.pageNo  === page}">
            <a (click)="setPage(p)">{{p.}}</a>
          </li>-->
          <li [ngClass]="{disabled:page.lastPage}">
            <a (click)="setPage(page.pageNo+1)">下一页</a>
          </li>
          <li [ngClass]="{disabled:page.lastPage}">
            <a (click)="setPage(page.totalPage)">末页</a>
          </li>
        </ul>



        <!--<ul>-->

        <!--<li *ngFor="let item of page.list | paginate: { itemsPerPage: page.pageSize, currentPage: page.pageNo }"> {{item.title}}</li>-->
        <!--</ul>-->
        <!--<pagination-controls  maxSize="9" (pageChange)="p = $event" #api></pagination-controls>-->
        <!--  <pagination-controls (pageChange)="p = $event"></pagination-controls>-->

      </div>
      <!--</section>-->
      <!--</section>-->
      <!--</section>-->
      <!--</section>-->
    </section>
  </section>
  <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
</section>
